<template>
    <div class="main">
        <div class="main-header" v-if="buttons.length">
            <el-button v-if="findButton('添加需求单')" type="primary" @click="$router.push('/senddemand')">创建需求单</el-button>
            <el-button v-if="findButton('预览需求单')" type="primary" @click="prevewDemand">预览需求单</el-button>
            <el-button v-if="findButton('删除需求单')" type="danger" @click="delDemand" :disabled="'delete' | formatDisabled(selection)">删除需求单</el-button>
        </div>
        <el-table :data="list" border header-cell-class-name="main-table-header" ref="table" class="main-table"
            height="100%" row-key="id" default-expand-all @selection-change="onSelectionChange" @row-click="onRowClick">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column width="100px" label="需求单ID" prop="id"></el-table-column>
            <!-- <el-table-column width="100px" label="所属项目ID" prop="project_id"></el-table-column> -->
            <el-table-column width="180px" label="所属项目名称" prop="project[project_name]"></el-table-column>
            <el-table-column width="100px" label="项目负责人" prop="project_manager"></el-table-column>
            <el-table-column >
                <template slot-scope="{row}">
                    <el-button v-if="findButton('编辑需求单')" type="primary" @click.stop="editDemand(row.id)">编辑需求单</el-button>
                    <el-button v-if="$getRouteAuth('/supplierbudget').get('add')" @click.stop="project_demand_id = row.id">创建报价单</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="main-pagination" :current-page.sync="page" :page-size="limit" :total="total"
            @current-change="onCurrentChange" layout="total,jumper,prev,pager,next"></el-pagination>
        
        <el-dialog title="预览需求单" :visible.sync="previewShow" @click="closePreview" :before-close="closePreview">
            <preview :form-value="previewList" @close="closePreview"></preview>
        </el-dialog>

        <addBudget v-model="addShow" :projectDemandId.sync="project_demand_id"></addBudget>
    </div>
</template>
<script>
import preview from './preview.vue'
import addBudget from '../supplierbudget/add'
export default {
    data() {
        return {
            addShow:false,//创建报价单的显示
            project_demand_id:0,//创建报价单 需求单的Id
            previewShow:false,
            previewList:[],
            list: [],
            selection: [],
            total: 0,
            limit: 20,
            page: 1,
        }
    },
    components:{
        preview,addBudget
    },
    computed: {
        buttons() {
            return this.$store.state.buttons;
        }
    },
    created(){
        this.getList()
    },
    methods: {
        async getList() {
            let res = await this.$get({
                url: "/admin/project.ProjectDemand/index",
                loading: true,
                params:{
                    page:this.page,
                    limit:this.limit
                }
            })      
            this.total = res.total
            this.list = res.list
        },
        // 预览
        prevewDemand(){
            if(!this.selection.length){
                this.$message.error('请选择需要预览的需求单');
                return
            }
            this.previewShow = true
            this.previewList = this.selection
        },
        // 关闭预览
        closePreview(){
           this.previewShow = false
           this.previewList = [] 
        },
        // 编辑需求单
        editDemand(id){
            this.$router.push('/senddemand?id='+id+'&edit=true')
        },
        // 删除需求单
        delDemand(){
            this.$confirm(
                `此操作将永久删除该${this.selection.length}个需求单, 是否继续?`,
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }
            )
                .then(async () => {
                    let query = "?";
                    for (let i = 0; i < this.selection.length; i++) {
                        const item = this.selection[i];
                        if (i > 0) {
                            query += "&ids[]=" + item.id;
                        } else {
                            query += "ids[]=" + item.id;
                        }
                    }
                    await this.$del({
                        url: "/admin/project.ProjectDemand/del" + query,
                        successTip: true,
                        loading: true
                    });
                    this.getList();
                })
                .catch(() => {
                    this.$refs.table.clearSelection();
                });
        },
        onRowClick(row) {
            this.$refs.table.toggleRowSelection(row);
        },
        onSelectionChange(selection) {
            this.selection = selection;
        },
        onCurrentChange(index) {
            this.page = index;
            this.getList()

        },
        tapButton(e) {
            switch (e.path) {
                case 'add':
                    this.$router.push('/addprogram')
                    break;
                case 'delete':
                    this.deleteProgram()
                    break;
                default:
                    console.log('default')
                    break;
            }
        },

    }
}
</script>
<style lang="less"></style>